import React from 'react';
import { useObserver } from 'mobx-react';
// @ts-ignore
import stores from '@/store/index';
import { Button } from 'antd';

export default () => {
  return useObserver(() => {
    const { mobxTestStore } = stores;

    let { title, list, handleAdd, handleDelete } = mobxTestStore;
    title = title || '';
    list = list || [];
    handleAdd = handleAdd || new Function();
    handleDelete = handleDelete || new Function();

    return (
      <div>
        {title && title}
        {list &&
          list.length > 0 &&
          list.map((item: any, index: number) => {
            return <div key={index}>{item}</div>;
          })}
        <Button onClick={handleAdd}>添加</Button>
        <Button onClick={handleDelete}>删除</Button>
      </div>
    );
  });
};
